<template>
	<view class="left-operate uv-flex-row">
		<view class="item btn-hover" @click="emits('showGuide')">
			<image src="/static/images/guide/icon.png" mode="widthFix"></image>
			<view class="name">打字助教</view>
		</view>
	</view>
</template>
<script setup>
	import { defineComponent, ref } from 'vue';
	const emits = defineEmits(['showGuide']);
	const tutor = ref(null);
</script>
<style scoped lang="scss">
	.left-operate {
		position: fixed;
		z-index: 10;
		left: 45px;
		bottom: 70px;
		.item {
			image {
				width: 90px;
			}
			.name {
				position: relative;
				z-index: 2;
				height: 28px;
				line-height: 28px;
				margin-top: -22px;
				font-size: 14px;
				color: #fff;
				text-align: center;
				background: linear-gradient(90deg, rgba(66, 66, 80, 0.00) 0%, #8484A4 25%, #8484A4 75.47%, rgba(71, 71, 86, 0.00) 100%);
			}
		}
	}
	@media screen and (max-width: 1600px) {
		.left-operate {
			left: 30px;
			bottom: 50px;
		}
		.left-operate .item image {
			width: 70px;
		}
		.left-operate .item .name {
			margin-top: -18px;
			font-size: 12px;
		}
	}
	@media screen and (max-width: 1400px) {
		.left-operate {
			left: 10px;
		}
	}
</style>